<template>
  <div class="card" @click.stop="handleClick">
    <div class="card__title">{{ title }}</div>
    <img v-if="icon" :src="icon" class="card__img" />
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Emit } from 'vue-property-decorator';

@Component({
  name: 'InstrumentCard'
})
export default class InstrumentCard extends Vue {
  @Prop(String) title!: string
  @Prop(String) icon?: string

  @Emit('click')
  handleClick() {}

};
</script>

<style lang="scss" scoped>
.card {
  position: relative;
  padding: 10px 12px;
  border-radius: 8px;
  box-shadow: 0 0.93px 2.79px 0 rgba(239, 242, 248, 0.8);
  background: linear-gradient(132deg, #fff, #fff, rgba(232, 244, 255, 1), rgba(205, 207, 255, 0.5));

  &__title {
    color: $font-color;
    font-size: 15px;
  }

  &__img {
    margin-top: 10px;
    width: 40px;
    height: 40px;
  }
}

</style>
